<template>
  <div class="card">
    <!-- 标题区域 -->
    <div class="card-header">学习计划表</div>
    <!-- 提交区域 -->
    <div class="card-body">
      <form>
        <div class="row g-4">
          <!-- 学习科目 -->
          <div class="col-auto">
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addon1">学习科目</span>
              <input type="text" class="form-control" placeholder="请输入学习科目" />
            </div>
          </div>
          <!-- 学习任务 -->
          <div class="col-auto">
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addon1">学习内容</span>
              <!-- textarea的高应该设为32px -->
              <textarea class="form-control"  placeholder="请输入学习内容"></textarea>
            </div>
          </div>
          <!-- 学习地点 -->
          <div class="col-auto">
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addon1">学习地点</span>
              <select class="form-select form-select-sm">
                <option value="">地点1</option>
              </select>
            </div>
          </div>
          <!-- 添加按钮 -->
          <div class="col-auto">
            <button type="submit" class="btn btn-primary">添加</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <table class="table table-striped table-hover table-bordered">
    <thead>
      <tr>
        <th scope="col">序号</th>
        <th scope="col">学习科目</th>
        <th scope="col">学习内容</th>
        <th scope="col">学习地点</th>
        <th scope="col">完成状态</th>
        <th scope="col">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>id</td>
        <td>subject</td>
        <td>content</td>
        <td>place</td>
        <td>
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="cb1"/>
            <label class="form-check-label" for="cb1">已完成</label>
            <label class="form-check-label" for="cb1">未完成</label>

          </div>
        </td>
        <td>
          <a href="javascript:;" >删除</a>
        </td>
      </tr>
    </tbody>
  </table>
</template>
 
<script setup>
import { ref } from 'vue'
//学习计划表条目数据
const list = ref([
  {
    id: '1',
    subject: 'Vue.js前端实战开发',
    content: '学习指令，例如v-if、v-for、v-model等',
    place: '自习室',
    status: false,
  },
])
//表单对应数据
let subject = ref('')
let content = ref('')
let nextId = ref('')
let selectedOption = ref('自习室')
let options = ref([
  { placeCode: 0, place: '自习室', },
  { placeCode: 1, place: '图书馆', },
  { placeCode: 2, place: '宿舍', },
])

let remove = function(id, status) {
  //删除计划条目
  //已完成才能删除
}

let add = function(){
  //添加学习计划条目
  //学习科目为必填项目
  
}
</script>